<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <script>
        var totalSum = 0, ipts ;
        $('#tb').onchange(function () {
            alert("message");
            var sum = 0;
            $("#tb tr").each(function () {
                ipts = $(this).find('input');
                sum = parseInt(ipts.eq(0).val() || 0) * parseFloat(ipts.eq(1).val() || 0);
                ipts.eq(2).val(sum);
                totalSum += sum;
            });
            $('#total').val(totalSum);
            $('#total')
        });
    </script>
</head>
<header th:replace="common/IncludeTop"></header>
<body>
<div id="Content">
<div id="BackLink">
    <a href="/account/main">返回主界面</a>
</div>

<div id="Catalog">

    <div id="Cart">

        <h2>购物车</h2>
        <form action="/cart/viewCart" method="post">
            <table id="tb">
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Product ID</b></th>
                    <th><b>Description</b></th>
                    <th><b>In Stock?</b></th>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th>&nbsp;</th>
                </tr>
                    <tr th:if="${cart.getNumberOfItems() == 0}">
                        <td colspan="8"><b>您尚未添加任何物品到购物车！</b></td>
                    </tr>
                <!-- 循环 -->
                    <tr th:each="cartItem:${cart.getCartItemList()}">
                        <td><a th:href="'/catalog/viewItem?itemId='+${cartItem.item.itemId}" th:text="${cartItem.item.itemId}">CartItem Item ItemID</a></td>
                        <td th:text="${cartItem.item.productId}">CartItem Item ProductID</td>
                        <td th:text="${cartItem.item.attribute}">CartItem Item Attribute</td>
                        <td th:text="${cartItem.inStock}">CartItem InStock</td>
                        <td><input type="number" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}"></td>
                        <td>
                            <input type="text" disabled="disabled" th:value="'$'+${#numbers.formatDecimal(cartItem.item.listPrice,1,2)}"/>
                        </td>
                        <td>
                            <input type="text" disabled="disabled" th:value="'$'+${#numbers.formatDecimal(cartItem.total,1,2)}"/>
                        </td>
                        <td th:if="${cart.getNumberOfItems() != 0}"><a th:href="'removeItem?itemId='+${cartItem.item.itemId}" class="Button">删除</a></td>
                    </tr>
                <tr>
                    <td colspan="8" th:if="${cart.getNumberOfItems() != 0}">
                    &nbsp;<label th:text="'总价:$'+${#numbers.formatDecimal(cart.subTotal,1,2)}"></label></td>
                </tr>
            </table>
        </form>

        <!-- 需要判断是否登录 -->
        <div th:if="${cart.getNumberOfItems() > 0}">
            <a href="/account/signin" th:if="(${cart.getNumberOfItems() > 0} and (${session.account == null}))">立即结账</a>
            <a href="/order/newOrderForm" th:if="(${cart.getNumberOfItems() > 0} and (${session.account != null}))">立即结账</a>
        </div>

    </div>

    <div id="Separator">&nbsp;</div>
</div>

</div>
</body>
<footer th:replace="common/IncludeBottom"></footer>
</html>